<template>
<view v-if="detailObj">
<view class="org_sec" >
    <view class="org_desc flex">
        <image :src="detailObj&&detailObj.avatar?detailObj.avatar:'/static/images/defaultorg.png'"></image>
        <view class="desc">
            <view class="name" >{{detailObj.name}}</view>
            <view class="slogan" >{{detailObj.recommend?detailObj.recommend:' '}}</view>
            <view>
                <image src="/static/images/icon_org_locate.png"></image>
                <text>{{detailObj.province?detailObj.province:' '}}  {{detailObj.city?detailObj.city:' '}}  {{detailObj.area?detailObj.area:''}}</text>
            </view>
        </view>
    </view>
    <view class="amount flex">
        <view class="amount_item flex">
            <view class="num">{{detailObj.jfTotal?detailObj.jfTotal:'0'}}</view>
            <view class="txt">公益时长</view>
        </view>
        <view class="amount_item flex">
            <view class="num">{{detailObj.countVolunteer?detailObj.countVolunteer:'0'}}</view>
            <view class="txt">组织人数</view>
        </view>
    </view>
</view>
<view class="content">
    <view class="tit">组织介绍</view>
    <view class="border_sec">
        <image class="quot" src="/static/images/quot.png"></image>
        <rich-text :nodes="detailObj.recommend" v-if="detailObj.recommend"></rich-text>
        <view class="no_data" v-else>
            <image class="no_data1" src="/static/images/icon_detail.png"></image>
            <text>暂无组织介绍</text>
        </view>
    </view>
</view>
<view class="content" style="display: none">
    <view class="tit">留言</view>
    <view class="no_data" v-if="!dialogList||dialogList.length==0">
        <image class="no_data2" src="/static/images/icon_dialog.png"></image>
        <text>期待您的留言</text>
    </view>
    <view v-for="(item, idx) in dialogList" :key="idx" class="dialog_sec flex">
        <view class="dialog_vol">
            <image :src="item.zyz_avatar?item.zyz_avatar:'/static/images/defaultorg.png'"></image>
            <view class="star_wrapper flex" v-if="item.zyz_star">
                <view v-for="(item, index) in tools.star(item.zyz_star)" :key="index" class="star">
                    <image src="/static/images/icon_star.png"></image>
                </view>
            </view>
        </view>
        <view class="dialog_detail">
            <view class="dialog_item">
                <view class="name">{{item.zyz_name?item.zyz_name:''}}<text>{{tools.dealTimeToRelativeStr(item.create_time)}}</text>
                </view>
                <view class="txt">{{item.content}}</view>
            </view>
            <view v-for="(subItem, subIdx) in item.sub" :key="subIdx" class="sub_dialog_sec flex">
                <view class="sub_dialog_vol">
                    <image :src="subItem.zyz_avatar?subItem.zyz_avatar:'/static/images/defaultorg.png'"></image>
                    <view class="star_wrapper flex" v-if="subItem.zyz_star">
                        <view v-for="(item, index) in tools.star(subItem.zyz_star)" :key="index" class="star">
                            <image src="/static/images/icon_star.png"></image>
                        </view>
                    </view>
                </view>
                <view class="sub_dialog_item">
                    <view class="name">{{subItem.zyz_name?subItem.zyz_name:' '}}<text>{{tools.dealTimeToRelativeStr(subItem.create_time)}}</text>
                    </view>
                    <view class="txt">
                        <view class="reply" v-if="subItem.pid_zyz_name!==item.zyz_name">回复@<text>{{subItem.pid_zyz_name}}：</text>
                        </view>
            {{subItem.content}}
          </view>
                </view>
            </view>
        </view>
    </view>
</view>
<view class="no_dialog">没有更多数据</view>
<view class="fixed_view">
    <view @tap="toJoin" :class="'btn apply_btn' + (btnDisabled?' disabled_btn':'')" v-if="!isJoinedOtherOrg && !isJoinedCurrentOrg">我要加入组织</view>
    <view @tap="toQuit" class="btn cancel_btn" v-if="isJoinedCurrentOrg">退出组织</view>
</view>
</view>
</template>

<script module="tools" lang="wxs" src="../../utils/tools.wxs"></script>

<script>
import {getJoinedOrgs} from '@/api/loginManage';
var t = require("../../utils/request.js"),
    e = function (t) {
  return t && t.__esModule ? t : {
    default: t
  };
}(require("../../utils/api.js")),
    a = require("../../utils/util.js"),
    n = e.default.departmentDetail,
    o = e.default.departmentJoin,
	joiedOrgList = e.default.departmantOrgList,
    i = e.default.departmentDeleteJoin,
    s = e.default.departmentCancelJoin,
    c = e.default.departmentQuit,
    l = e.default.messageList,
    app = getApp();

export default {
  data() {
    return {
      dialogList: null,
      detailObj: null,
      applyStatus: 1,
	  isJoinedCurrentOrg: false,
	  isJoinedOtherOrg: false,
      btnDisabled: !1,
      id: ""
    };
  },

  components: {},
  props: {},
  onLoad: function (t) {
    t.id ? (this.setData({
      id: t.id
    }), this.getDetailRequest()) : uni.navigateBack();
  },
  onReady: function () {},
  onShow: function () {},
  onHide: function () {},
  onUnload: function () {},
  onPullDownRefresh: function () {},
  onReachBottom: function () {},
  onShareAppMessage: function () {
    return {
      title: this.detailObj.title,
      path: "/pages/index/index?orgId=" + this.detailObj.departmentid,
      imageUrl: this.detailObj.avatar ? this.detailObj.avatar : "/static/images/defaultorg.png"
    };
  },
  methods: {
		getJoinedOrgRequest: function() {
			var params = {uid: app.globalData.zyzId};
			console.log(params);
			return getJoinedOrgs(params);
		},
    getDetailRequest: function () {
      var e = this,
          o = (arguments.length > 0 && void 0 !== arguments[0] && arguments[0], {
        data: {
          api: n,
          id: this.id,
		      contentType: 'application/x-www-form-urlencoded'
        },
        token: app.globalData.token
      });
	  
      (0, t.request)(o, "normal", !0).then(function (t) {
        if (t.data.success) {
          var o = t.data.data;
					if (app.globalData.zyzId) {
						e.getJoinedOrgRequest().then(function(result) {
							if (result.success) {
								result.data.forEach(function(singleJoinedOrg) {
									if (singleJoinedOrg.orgId == e.id) {
										e.isJoinedCurrentOrg = true;
									} else if (singleJoinedOrg.orgId != e.id) {
										e.isJoinedOtherOrg = true;
									}
								});
							}
						});
					}
					e.setData({
						detailObj: t.data.data,
					});
        }

        return uni.showToast({
          title: t.data.message,
          icon: "none"
        }), Promise.reject();
      });
    },
    messageListRequest: function () {
      var e = {
        url: l,
        data: {
          page: 1,
          pagesize: 5,
          zyzid: app.globalData.zyzId,
          type: "department",
          type_id: this.id
        }
      };
      return (0, t.request)(e, "", !1, "app");
    },
    toJoin: function () {
      var t = this;
      app.globalData.loginFlag ? this.btnDisabled || (this.setData({
        btnDisabled: !0
      }), uni.showModal({
        content: "确定申请加入该组织吗？",
        showCancle: !0,
        cancelText: "再看看",
        cancelColor: "#333333",
        confirmText: "立即申请",
        confirmColor: "#24CBA9",
        success: function (e) {
          e.confirm && t.joinRequest().then(function (e) {
            e.data.success ? uni.showToast({
              title: "申请发送成功，等待组织审核！",
              icon: "none",
              success: function () {
                t.setData({
                  isJoinedCurrentOrg: true,
                  btnDisabled: !1
                });
              }
            }) : uni.showToast({
              title: e.data.message,
              icon: "none",
              success: function () {
                t.setData({
                  btnDisabled: !1
                });
              }
            });
          }).catch(function (t) {
            console.log(t);
          }), e.cancel && t.setData({
            btnDisabled: !1
          });
        }
      })) : uni.showModal({
        title: "温馨提示",
        content: "您还未登录，立即登录？",
        showCancle: !0,
        cancelText: "再看看",
        cancelColor: "#333333",
        confirmText: "去登录",
        confirmColor: "#24CBA9",
        success: function (t) {
          t.confirm && uni.navigateTo({
            url: "/pages/entry/login"
          });
        }
      });
    },
    toCancelJoin: function () {
      var t = this;
      uni.showModal({
        content: "确定取消申请吗？",
        showCancle: !0,
        cancelText: "再看看",
        cancelColor: "#333333",
        confirmText: "立即取消",
        confirmColor: "#24CBA9",
        success: function (e) {
          e.confirm && t.cancelJoinRequest().then(function (e) {
            e.data.success ? uni.showToast({
              title: "取消加入该组织成功，欢迎再次申请！",
              icon: "none",
              success: function () {
                t.setData({
                  applyStatus: 1
                });
              }
            }) : uni.showToast({
              title: e.data.message,
              icon: "none"
            });
          }).catch(function (t) {
            console.log(t);
          });
        }
      });
    },
    toQuit: function () {
      var t = this;
      uni.showModal({
        title: "温馨提示",
        content: "确定要退出该组织吗？",
        showCancle: !0,
        cancelText: "再看看",
        cancelColor: "#333333",
        confirmText: "立即取消",
        confirmColor: "#24CBA9",
        success: function (e) {
          e.confirm && t.quitRequest().then(function (e) {
            e.data.success && uni.showToast({
              title: "退出组织成功，欢迎再次加入！",
              icon: "none",
              success: function () {
                t.setData({
                  isJoinedCurrentOrg: false
                });
              }
            });
          }).catch(function (t) {
            console.log(t);
          });
        }
      });
    },
    joinRequest: function () {
      var e = {
        data: {
          api: o,
          orgId: this.id,
          uid: app.globalData.zyzId,
		  contentType: 'application/x-www-form-urlencoded',
        }
      };
      return (0, t.request)(e, "normal", !0);
    },
    cancelJoinRequest: function () {
      var e = {
        data: {
          api: s,
          orgId: this.id,
          uid: app.globalData.zyzId,
		  contentType: 'application/x-www-form-urlencoded',
        },
        token: app.globalData.token
      };
      return (0, t.request)(e, "common", !0);
    },
    quitRequest: function () {
      var e = {
        data: {
          api: c,
          orgId: this.id,
          id: app.globalData.zyzId
        },
        token: app.globalData.token
      };
      return (0, t.request)(e, "normal", !0);
    },
    deleteJoinRequest: function () {
      var e = {
        data: {
          api: i,
          id: this.id
        },
        token: app.globalData.token
      };
      return (0, t.request)(e, "common", !0);
    }
  }
};
</script>
<style>
page {
    min-height: 100%;
    background: #f4f4f4;
    padding-bottom: 120rpx;
}

.org_sec,page {
    width: 100%;
    height: auto;
}

.org_sec {
    min-height: 355rpx;
    margin-bottom: 10rpx;
    background: #fff;
}

.org_sec .org_desc {
    width: 100%;
    min-height: 220rpx;
    height: auto;
    padding: 30rpx;
    justify-content: flex-start;
}

.org_desc image {
    flex: 0 0 120rpx;
    align-self: flex-start;
    width: 120rpx;
    height: 120rpx;
    margin-right: 30rpx;
}

.org_desc .desc {
    flex: auto;
}

.org_desc .desc .name {
    margin-bottom: 20rpx;
    font-weight: 500;
    font-size: 30rpx;
    color: #333;
}

.org_desc .desc .slogan {
    margin-bottom: 20rpx;
    font-size: 28rpx;
    color: #333;
}

.org_desc .desc image {
    width: 16rpx;
    height: 22rpx;
    padding: 0;
    margin: 0 8rpx 0 0;
}

.org_desc .desc text {
    font-size: 24rpx;
}

.org_sec .amount {
    justify-content: flex-start;
    border-top: 1rpx solid #e1e2e3;
}

.amount .amount_item {
    flex: auto;
    flex-direction: column;
    height: 135rpx;
    border-right: 1rpx solid #e1e2e3;
    align-content: center;
}

.amount .amount_item:last-child {
    border-right: none;
}

.amount .num {
    font-size: 36rpx;
    font-weight: 700;
}

.amount .num,.amount .txt {
    width: 100%;
    height: auto;
    text-align: center;
}

.amount .txt {
    font-size: 24rpx;
}

.content {
    width: 100%;
    height: auto;
    padding: 40rpx 30rpx;
    margin-bottom: 10rpx;
    background: #fff;
}

.content .tit {
    margin-bottom: 40rpx;
    font-size: 30rpx;
    font-weight: 500;
}

.content .tit .sub {
    position: relative;
    top: -15rpx;
    margin-left: 10rpx;
    font-size: 24rpx;
}

.content .border_sec {
    position: relative;
    width: 100%;
    height: auto;
    padding: 30rpx;
    background: #fafffe;
    box-shadow: 0rpx 4rpx 12rpx 0rpx hsla(0,0%,88.2%,.5);
    border-radius: 20rpx;
    border: 1rpx solid #24cba9;
}

.border_sec .quot {
    position: absolute;
    top: -16rpx;
    right: 30rpx;
    display: block;
    width: 32rpx;
    height: 26rpx;
}

.content .no_data {
    width: 100%;
    height: auto;
    text-align: center;
    font-size: 0;
}

.content .no_data image.no_data1 {
    display: block;
    width: 72rpx;
    height: 76rpx;
    margin: 0 auto 15rpx;
}

.content .no_data image.no_data2 {
    display: block;
    width: 80rpx;
    height: 72rpx;
    margin: 0 auto 15rpx;
}

.content .no_data text {
    font-size: 24rpx;
    color: #999;
}

.pad_bottom {
    width: 100%;
    height: 158rpx;
    background: #f4f4f4;
}

.fixed_view {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    width: 100%;
    height: 100rpx;
    padding: 10rpx 0;
    background: #fff;
    box-shadow: 0rpx -10rpx 20rpx 0 rgba(0,0,0,.05);
}

.fixed_view .remain_time {
    padding: 16rpx 0;
    text-align: center;
    font-size: 20rpx;
    color: #666;
}

.fixed_view .btn {
    width: 92%;
    height: 80rpx;
    margin: 0 auto;
    line-height: 80rpx;
    text-align: center;
    border-radius: 40rpx;
    font-size: 32rpx;
    color: #fff;
}

.fixed_view .btn.apply_btn {
    background: #24cba9;
}

.vols_wrapper {
    justify-content: flex-start;
    width: 100%;
    height: 90rpx;
}

.vols_wrapper .vols_item {
    position: relative;
    flex: 0 0 90rpx;
    width: 90rpx;
    height: 90rpx;
    margin-right: 30rpx;
}

.vols_item image.headimg {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.vols_item .star_wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 9;
    width: 100%;
    height: 24rpx;
    border-radius: 12rpx;
    border: 1rpx solid #e1e2e3;
    background-color: #fff;
}

.star_wrapper .star {
    flex: 0 0 12rpx;
    width: 12rpx;
    height: 12rpx;
    margin-right: 4rpx;
    font-size: 0;
}

.star_wrapper .star:last-child {
    margin-right: 0;
}

.star_wrapper .star image {
    display: block;
    width: 12rpx;
    height: 12rpx;
}

.dialog_sec {
    width: 100%;
    height: auto;
    justify-content: flex-start;
}

.dialog_sec+.dialog_sec {
    margin-top: 30rpx;
}

.dialog_sec .dialog_vol {
    position: relative;
    flex: 0 0 72rpx;
    width: 72rpx;
    height: 72rpx;
    margin-right: 18rpx;
    align-self: flex-start;
}

.dialog_vol image {
    width: 72rpx;
    height: 72rpx;
    border-radius: 50%;
}

.dialog_vol .star_wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 72rpx;
    height: 20rpx;
    border: 1rpx solid #e1e2e3;
    border-radius: 10rpx;
    background-color: #fff;
}

.dialog_vol .star_wrapper .star {
    flex: 0 0 12rpx;
    width: 12rpx;
    height: 12rpx;
    margin-right: 2rpx;
}

.dialog_sec .dialog_detail {
    flex: auto;
    height: auto;
}

.dialog_detail .dialog_item {
    width: 100%;
    height: auto;
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #e1e2e3;
}

.dialog_item .name,.sub_dialog_item .name {
    margin-bottom: 20rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
}

.dialog_item .name text,.sub_dialog_item .name text {
    display: inline-block;
    margin-left: 30rpx;
    font-size: 24rpx;
    color: #999;
}

.dialog_item .txt,.sub_dialog_item .txt {
    font-size: 28rpx;
}

.dialog_detail .sub_dialog_sec {
    justify-content: flex-start;
    width: 100%;
    height: auto;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #e1e2e3;
}

.sub_dialog_sec .sub_dialog_vol {
    position: relative;
    flex: 0 0 52rpx;
    width: 52rpx;
    height: 52rpx;
    margin-right: 18rpx;
    align-self: flex-start;
}

.sub_dialog_vol image {
    width: 52rpx;
    height: 52rpx;
    border-radius: 50%;
}

.sub_dialog_vol .star_wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 52rpx;
    height: 14rpx;
    border: 1rpx solid #e1e2e3;
    background-color: #fff;
    border-radius: 7rpx;
}

.sub_dialog_vol .star_wrapper .star {
    flex: 0 0 8rpx;
    width: 8rpx;
    height: 8rpx;
    margin-right: 2rpx;
}

.sub_dialog_vol .star_wrapper .star image {
    width: 8rpx;
    height: 8rpx;
}

.sub_dialog_item .txt .reply {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.no_dialog {
    width: 100%;
    height: 100rpx;
    background: #f4f4f4;
    line-height: 100rpx;
    text-align: center;
    font-size: 24rpx;
    color: #b4b4b4;
}
</style>